import React from 'react';
import { Avatar, Button, Card, Col, DatePicker, Divider, Empty, Form, Input, Row, Select, Spin, Table } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { doRobotList } from '@/services/robotManagement';
import moment from 'moment';
import HotQuestions from '@/pages/DataStatistics/PublicOpinionAnalysis/hotQuestions';
import LineStatistical from '@/pages/DataStatistics/PublicOpinionAnalysis/lineStatistical';
import QuestionCard from '@/pages/DataStatistics/PublicOpinionAnalysis/questionCard';
import Wordcloud from '@/pages/DataStatistics/PublicOpinionAnalysis/Wordcloud';
import KeywordAnalysis from '@/pages/DataStatistics/PublicOpinionAnalysis/keywordAnalysis';
import CorrelationAnalysis from '@/pages/DataStatistics/PublicOpinionAnalysis/correlationAnalysis';
import styles from './index.css'
import hot from '@/assets/home/hot.png';
import { statHit, wordCloud, chartTrend } from '@/services/datastatistics';


class PublicOpinionAnalysis extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      robotList: [],
      hotQuestion: [],
      knowledgeData: [],
      atlasData: [],
      dialogData: [],
      dataSource: [],
      cloudData: []
    }
  }

  componentDidMount() {
    this.getAllRobot();
    this.getQuestionSummary()
    this.getWordCloud()
  }

  /**
   * 获取所有机器人（作为筛选条件）
   */
  getAllRobot = async () => {
    const res = await doRobotList({ current: 1, size: 999999 });
    this.setState({
      robotList: res
    })
  }

  /**
   * 
   * @returns 获取热门数据
   */
  getQuestionSummary = async () => {
    const info = this.props.form.getFieldsValue();
    console.log(info);
    let obj = {
      createTimeStart: moment(info.time[0]).format('YYYY-MM-DD'),
      createTimeEnd: moment(info.time[1]).format('YYYY-MM-DD'),
      applicationId: info.robotId == '0' ? '' : info.robotId,
      touchWay: info.trigger
    }
    const res = await statHit({ ...obj, type: 0 })
    const res1 = await statHit({ ...obj, type: 1 })
    const res2 = await statHit({ ...obj, type: 2 })
    const res3 = await statHit({ ...obj, type: 3 })

    this.setState({
      knowledgeData: res1.slice(0, 10),
      atlasData: res2.slice(0, 10),
      dialogData: res3.slice(0, 10),
      hotQuestion: res.slice(0, 10),
    }, () => {
      if (this.state.hotQuestion && this.state.hotQuestion[0]) {
        this.getTrend(this.state.hotQuestion[0].qaId)
      }
    })
  }

  /**
   * 根据知识点id获取趋势图
   */
  getTrend = async (qaId) => {
    const info = this.props.form.getFieldsValue();
    let obj = {
      createTimeStart: moment(info.time[0]).format('YYYY-MM-DD'),
      createTimeEnd: moment(info.time[1]).format('YYYY-MM-DD'),
      applicationId: info.robotId == '0' ? '' : info.robotId,
      trigger: info.trigger,
      qaId
    }
    const res = await chartTrend(obj)
    this.setState({
      dataSource: res
    })
  }

  /**
   * 获取词云
   */
  getWordCloud = async () => {
    const info = this.props.form.getFieldsValue();
    let obj = {
      createTimeBegin: moment(info.time[0]).format('YYYY-MM-DD'),
      createTimeEnd: moment(info.time[1]).format('YYYY-MM-DD'),
      applicationId: info.robotId == '0' ? '' : info.robotId,
      trigger: info.trigger
    }
    const res = await wordCloud(obj);
    this.setState({
      cloudData: res
    }, () => {
      this.Wordcloud.renderCharts(res)
    })
  }

  /**
   * 
   * @returns 查看
   */
  queryByCondition = () => {
    this.getQuestionSummary()
    this.getWordCloud()
  }

  render() {
    const { loading, robotList, hotQuestion, knowledgeData, dialogData, dataSource, atlasData, cloudData } = this.state;
    const { getFieldDecorator } = this.props.form;
    return (
      <PageHeaderWrapper>
        <Card bodyStyle={{ paddingBottom: 10, paddingTop: 10 }}>
          <Row type="flex" align="middle">
            <Col span={3}>
              <span
                style={{
                  fontSize: 16,
                  color: '#4B5475',
                  borderLeft: '5px solid #13c2f3',
                  paddingLeft: 10,
                  fontWeight: 600,
                }}
              >
                舆情分析
              </span>
            </Col>
            <Col span={21} style={{ textAlign: 'right' }}>
              <Form layout={'inline'}>

                <Form.Item>
                  {
                    getFieldDecorator('robotId', {
                      initialValue: '0'
                    })(
                      <Select style={{ width: 200 }} placeholder={'请选择应用'}>
                        <Select.Option value={'0'}>全部应用</Select.Option>
                        {
                          robotList.map(item => {
                            return <Select.Option value={item.applicationId} key={item.applicationId}>{item.name}</Select.Option>
                          })
                        }
                      </Select>
                    )
                  }
                </Form.Item>
                <Form.Item style={{ textAlign: 'center' }}>
                  {getFieldDecorator('time', {
                    initialValue: [moment().subtract('7', 'days'), moment()],
                  })(<DatePicker.RangePicker allowClear={false} />)}
                </Form.Item>
                <Form.Item>
                  {
                    getFieldDecorator('trigger', {
                      initialValue: ''
                    })(
                      <Select style={{ width: 200 }} placeholder={'请选择触发方式'}>
                        <Select.Option value={''}>全部触发方式</Select.Option>
                        <Select.Option value={1}>点击触发</Select.Option>
                        <Select.Option value={0}>输入触发</Select.Option>
                      </Select>
                    )
                  }
                </Form.Item>
                <Form.Item>
                  <Button type={'primary'} onClick={this.queryByCondition}>
                    查看
                  </Button>
                </Form.Item>
              </Form>

            </Col>
          </Row>
        </Card>
        <Card style={{ marginTop: 10 }}>
          <Spin spinning={loading}>
            <Row style={{ margin: '15px 0' }}>
              <Col span={24} className={styles.title}><Avatar src={hot} size={20} />热门问题汇总</Col>
            </Row>
            <Row>
              <Col span={10}>
                <HotQuestions hotQuestion={hotQuestion} pageSource={'list'} getTrend={this.getTrend} />
              </Col>
              <Col span={14}>
                <div className={styles.lineBox}>
                  <div style={{ background: '#ffffff', padding: 10 }}>
                    <LineStatistical dataSource={dataSource} />
                  </div>

                </div>
              </Col>
            </Row>
          </Spin>
        </Card>
        <div style={{ border: '1px solid rgb(232, 232, 232)' }} className={styles.card_box}>
          <div className={styles.questionCard1}>
            <QuestionCard title={'热门问答知识点'} data={knowledgeData} pageSource={'knowledge'} />
          </div>
          <div className={styles.questionCard2}>
            <QuestionCard title={'热门导图节点'} data={atlasData} pageSource={'atlas'} />
          </div>
          <div className={styles.questionCard3}>
            <QuestionCard title={'热门多轮对话'} data={dialogData} pageSource={'dialog'} />
          </div>
        </div>
        <Card bodyStyle={{ paddingBottom: 10, paddingTop: 10 }} style={{ marginTop: 10 }}>
          <Row>
            <Col span={3}>
              <span
                style={{
                  fontSize: 16,
                  color: '#4B5475',
                  borderLeft: '5px solid #13c2f3',
                  paddingLeft: 10,
                  fontWeight: 600,
                }}
              >
                词云分析
              </span>
            </Col>
          </Row>
        </Card>
        <Card>
          <Row>
            <Col span={12} className={'clearfix'}>
              <div className={styles.cloud_box}>
                {/* <Empty style={{marginTop:120}} /> */}
                <Wordcloud cloudData={cloudData} onRef={ref => this.Wordcloud = ref} />
              </div>
            </Col>
            <Col span={12}>
              <KeywordAnalysis />
            </Col>
          </Row>
          <Divider style={{ margin: 15 }} />
          <CorrelationAnalysis />
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default Form.create()(PublicOpinionAnalysis)
